<template>
  <div>
    <!-- title -->
    <PageTitle>
      {{ $t("menu.M_10400610") }}
    </PageTitle>
    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      :page-size="pageSize"
      :total="rows"
      :current-page="pageNo"
      @current-change="currentChangeHandle"
    >
      <div class="search-box">
        <el-form @submit.prevent.native inline class="p-4">
          <el-form-item>
            <el-input
              v-model="categoryName"
              :maxlength="32"
              show-word-limit
              @blur="() => (categoryName = categoryName.trim())"
              :placeholder="$t('appstore.application.category_name')"
              clearable
              @keyup.enter.native="searchToFirstPage"
            />
          </el-form-item>

          <el-form-item>
            <el-select
              v-model="status"
              clearable
              :placeholder="$t('appstore.application.category_status')"
              @change="statusChange"
            >
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="w-8" @click="searchToFirstPage">
              <svg-icon icon-class="search" />
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              v-permission="{ permission: '10400610.MANAGE' }"
              type="primary"
              class="w-8"
              @click="addCategory"
            >
              <svg-icon icon-class="plus" />
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table ref="multipleTable" :data="tableData" stripe>
        <el-table-column
          :label="$t('appstore.application.category_name_en')"
          prop="categoryNameEn"
        ></el-table-column>
        <el-table-column
          :label="$t('appstore.application.category_name_zh')"
          prop="categoryNameZh"
        ></el-table-column>
        <el-table-column
          :label="$t('appstore.application.category_name_pt')"
          prop="categoryNamePt"
        ></el-table-column>
        <el-table-column
          :label="$t('appstore.application.category_name_ja')"
          prop="categoryNameJa"
        ></el-table-column>
        <el-table-column
          :label="$t('appstore.application.category_sort')"
          prop="indexSort"
        ></el-table-column>
        <el-table-column
          :label="$t('appstore.application.category_status')"
          prop="status"
        >
          <template v-slot="{ row }">
            <el-tag v-if="row.status === 0" type="danger" size="small">{{
              statusFilter(row.status)
            }}</el-tag>
            <el-tag v-if="row.status === 1" type="success" size="small">{{
              statusFilter(row.status)
            }}</el-tag>
          </template>
        </el-table-column>
        <!--        <el-table-column>-->
        <!--          <template v-slot="{row}">-->
        <!--            <span>{{ dateFilter( row.creTime ) }}</span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column width="75px">
          <template v-slot="{ row }">
            <el-dropdown
              class="align-middle"
              trigger="click"
              v-permission="{ permission: '10400610.MANAGE' }"
            >
              <el-button text class="w-8">
                <svg-icon icon-class="MoreFilled" />
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="deleteCategory(row.categoryId)">
                    <svg-icon icon-class="delete" />
                    {{ $t("appstore.application.delete_category_tip") }}
                  </el-dropdown-item>
                  <el-dropdown-item @click="editCategory(row.categoryId)">
                    <svg-icon icon-class="edit" />
                    {{ $t("appstore.application.edit_category_tip") }}
                  </el-dropdown-item>
                  <el-dropdown-item
                    v-if="row.status === 1"
                    @click="lockCategory(row.categoryId)"
                  >
                    <svg-icon icon-class="lock" />
                    {{ $t("appstore.application.lock_category_tip") }}
                  </el-dropdown-item>
                  <el-dropdown-item
                    v-if="row.status === 0"
                    @click="unlockCategory(row.categoryId)"
                  >
                    <svg-icon icon-class="unlock" />
                    {{ $t("appstore.application.unlock_category_tip") }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
        <!-- <el-table-column >
          <template v-slot="{row}">
            <div v-permission="{permission:'10400610.MANAGE'}">
              <el-tooltip
                class='item'
                effect='dark'
                :content="$t('appstore.application.delete_category_tip')"
                placement='top'>
                <svg-icon role='button' icon-class='trash' @click='deleteCategory(row.categoryId)' />
              </el-tooltip>
              <el-tooltip
                class='item'
                effect='dark'
                :content="$t('appstore.application.edit_category_tip')"
                placement='top'>
                <svg-icon role='button' icon-class='edit' @click='editCategory(row.categoryId)' />
              </el-tooltip>
              <el-tooltip
                v-if='row.status === 1'
                class='item'
                effect='dark'
                :content="$t('appstore.application.lock_category_tip')"
                placement='top'>
                <svg-icon role='button' icon-class='lock' @click='lockCategory(row.categoryId)' />
              </el-tooltip>
              <el-tooltip
                v-if='row.status === 0'
                class='item'
                effect='dark'
                :content="$t('appstore.application.unlock_category_tip')"
                placement='top'>
                <svg-icon role='button' icon-class='unlock' @click='unlockCategory(row.categoryId)' />
              </el-tooltip>
            </div>
          </template>
        </el-table-column> -->
      </el-table>
    </el-card>
    <add-category
      v-model="addCategoryVisible"
      :category-id="editCategoryId"
      :title="
        editCategoryId
          ? $t('appstore.application.category_edit')
          : $t('appstore.application.category_add')
      "
      @refresh="searchToFirstPage"
    ></add-category>
  </div>
</template>

<script>
import { dateFilter, dateTimeFilter, timeFilter } from "@/filters";
import {
  categoryLock,
  categoryUnlock,
  deleteCategory,
  queryCategoryList,
} from "@/api/app-category";
import AddCategory from "@/views/appstore/components/add-category";
import PageTitle from "@/components/PageTitle/index.vue";
export default {
  components: { AddCategory, PageTitle },
  computed: {
    statusList() {
      return [
        { value: 1, label: this.$t("appstore.application.category_active") },
        { value: 0, label: this.$t("appstore.application.category_locked") },
      ];
    },
  },
  data() {
    return {
      addCategoryVisible: false,
      status: "",
      categoryName: "",
      pageNo: 1,
      pageSize: 10,
      rows: 0,
      tableData: [],
      editCategoryId: "",
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    dateFilter,
    dateTimeFilter,
    timeFilter,
    statusFilter(status) {
      const statusMap = {
        0: this.$t("appstore.application.category_locked"),
        1: this.$t("appstore.application.category_active"),
      };
      return statusMap[status];
    },
    searchToFirstPage() {
      this.pageNo = 1;
      this.search();
    },
    search() {
      queryCategoryList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        status: this.status,
        categoryName: this.categoryName,
      })
        .then((res) => {
          this.rows = res.rows;
          this.tableData = res.data;
          // if (this.tableData) {
          //   this.tableData.forEach(item => {
          //     item.categoryName = this.$t('category.' + item.categoryCode)
          //   })
          // }
        })
        .catch(this.$confirmError);
    },
    statusChange(value) {
      this.status = value;
    },
    handleCurrentChange(page) {
      this.page = page;
      this.search();
    },
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.search();
    },
    currentChangeHandle(val) {
      this.pageNo = val;
      this.search();
    },
    formatDate(row, column, cellValue, index) {
      return dateTimeFilter(cellValue);
    },
    addCategory() {
      this.editCategoryId = "";
      this.addCategoryVisible = true;
    },
    editCategory(categoryId) {
      this.editCategoryId = categoryId;
      this.addCategoryVisible = true;
    },
    lockCategory(categoryId) {
      this.$commonConfirm({
        content: this.$t("appstore.application.lock_content_category"),
        title: this.$t("appstore.application.lock_title"),
        btnSureTitle: this.$t("common.common_confirm.button.sure"),
        onConfirm: (instance, done) => {
          instance.loading = true;
          categoryLock(categoryId)
            .then((res) => {
              instance.loading = false;
              if (res) {
                this.searchToFirstPage();
              }
              done();
            })
            .catch((e) =>
              this.$confirmError(e).then(() => {
                done();
              })
            );
        },
      });
      return;
    },
    unlockCategory(categoryId) {
      this.$commonConfirm({
        content: this.$t("appstore.application.unlock_content_category"),
        title: this.$t("appstore.application.unlock_title"),
        btnSureTitle: this.$t("common.common_confirm.button.sure"),
        onConfirm: (instance, done) => {
          instance.loading = true;
          categoryUnlock(categoryId)
            .then((res) => {
              instance.loading = false;
              if (res) {
                this.searchToFirstPage();
              }
              done();
            })
            .catch((e) =>
              this.$confirmError(e).then(() => {
                done();
              })
            );
        },
      });
      return;
    },
    deleteCategory(categoryId) {
      this.$commonConfirm({
        type: "danger",
        content: this.$t("appstore.application.delete_content_category"),
        title: this.$t("common.common_confirm.delete_title"),
        btnSureTitle: this.$t("common.common_confirm.button.delete"),
        onConfirm: (instance, done) => {
          instance.loading = true;
          deleteCategory(categoryId)
            .then((res) => {
              instance.loading = false;
              if (res) {
                this.searchToFirstPage();
              }
              done();
            })
            .catch((e) =>
              this.$confirmError(e).then(() => {
                done();
              })
            );
        },
      });
      return;
    },
  },
};
</script>
